<template>
  <div>
    <course-base @sendform="getForm"
                 @senddeta="getDeta"></course-base>
    <div class="index_wrap">
      <div v-if="dirCoverFlag"
           class="dirCover"></div>
      <div class="course_title">
        <i class="el-icon-menu"></i>
        <div>课程内容</div>
      </div>
      <div class="info">
        <div>
          <dir-com></dir-com>
        </div>
        <div>
          <add-video></add-video>
        </div>
      </div>
      <div class="wangge">
        <Editor id="tinymce"
                v-model="goodsDetail"
                :init="editorInit"></Editor>
      </div>
      <div>
        <el-button type="success"
                   @click="saveAll()">全部保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import dirCom from './dir.vue'
import addVideo from './addVideo.vue'
import courseBase from './courseBase.vue'
// npm i   tinymce@5.0.3 -S 
// npm i @tinymce/tinymce-vue@2.0.0 -S
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/silver/theme'
import Editor from '@tinymce/tinymce-vue'
// 整个课程的保存接口
import { saveAllCourse, getCourseById } from '../../api/course'
export default {
  name: 'Ljfvue2011Index',
  components: {
    courseBase,
    dirCom,
    addVideo,
    Editor
  },
  data () {
    return {
      dirCoverFlag: true,
      goodsDetail: "", //富文本编辑器内容
      editForm: {},
      editorInit: {
        language_url: '/tinymce/langs/zh_CN.js',// 语言包的路径
        language: 'zh_CN',//语言
        skin_url: '/tinymce/skins/ui/oxide',// skin路径
        height: 400,//编辑器高度
        branding: false,//是否禁用“Powered by TinyMCE”
        menubar: true,//顶部菜单栏显示
      }
    };
  },

  mounted () {
    tinymce.init({});
  },

  methods: {
    getForm (obj) { //接收整个表单数据
      this.editForm = obj;
      console.log(10101010)
    },
    getDeta (deta) { //接受详情
      this.goodsDetail = deta; //富文本详情
    },
    async saveAll () {
      // 通过ID 获取课程详情
      var cres = await getCourseById(this.$route.query.CDid);
      console.log(cres)
      var courselist = cres.data.data.courselist;
      // 保存整个课程
      var res = await saveAllCourse({
        Cname: this.editForm.Cname,
        _id: this.$route.query._cid,   //课程_id
        Cdescribe: this.editForm.Cdescribe,
        Cprice: this.editForm.Cprice,
        CategoryOne: this.editForm.CategoryOne,
        CategoryTwo: this.editForm.CategoryTwo,
        CategoryThree: this.editForm.CategoryThree,
        Cpic: this.editForm.Cpic,
        Cdetails: this.goodsDetail
      })
      console.log(res)
      if (res.data.success) {
        this.$message({
          message: "课程更新成功",
          type: "success"
        })
        this.goodsDetail = ""
        if (this.$route.query.action) { //当前是修改
          this.$router.push({ name: "courseList" })
        } else {
          this.$router.push({ name: "courseadd" })
          // vue组件强制刷新
          location.reload();
        }

      }
    }
  },
};
</script>

<style lang="less" scoped>
.info {
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin-bottom: 30px;
  > div {
    width: 45%;
    height: 600px;
    background: black;
  }
}
.index_wrap {
  position: relative;
  .dirCover {
    width: 100%;
    height: 700px;
    background: rgba(255, 255, 255, 0.6);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 999;
  }
}
.wangge {
  width: 100%;
  height: 400px;
  background: black;
}
</style>